import React from "react";
import { Code } from "../../Code";
import "./style.css";
export default function Index() {
  return (
    <div className="page column">
      <div className="sub-title">如何使用</div>
      <div className="cover">
        <div>
          <div>完全使用css</div>
          <Code lang="css">
            {`.anime{
  animation: anime-name         //关键帧名称
             duration           //持续时间
             timing-function    //时间函数
             delay              //延时时长
             iteration-count    //循环次数
             direction          //播放方向
             fill-mode;         //填充模式
}
@keyframe anime-name{
  0%  { 
    //书写属性
  }
  100%{   }
}
`}
          </Code>
        </div>
        <div>
          <div>使用css-transition属性配合js</div>
          <Code lang='css'>{`#element {
  transition: all 0.5s ease;
  width     : 10px;
}`}</Code>
<Code lang='js'>
{`
document.getElementById("element")
        ?.style.setProperty("width","20px");
`}
</Code>
        </div>
        <div>
          <div>使用js逐帧改变css属性</div>
          <Code lang='html'>
{`<div id='element2'></div>`}
          </Code>
          <Code lang='js'>{
`const element2=document.getElementById('element2');
void function animeByJs(){
  requestAnimationFrame(animeByJs)
  element2?.style.setProperty(
    ...
  )
}()`
}</Code>

        </div>
      </div>
    </div>
  );
}
